@c-white  : #fff;
@c-red    : #d41e32;
@c-font   : #2c3e50;
@c-danger : #96081a;
@c-success: #67C23A;
@c-wraning: #E6A23C;
@c-friend : #409EFF;
@c-info   : #909399;
@c-back   : #eee;

#app {
  font-family            : Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  color                  : @c-font;
  margin-top             : 60px;
}

html,
body,
#app {
  padding         : 0;
  margin          : 0;
  background-color: @c-back;
}

html,
body {
  height: 100vh;
}

#app {
  height: 100%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 颜色 */
.m-white {
  color: @c-white;
}

.m-primary {
  color: @c-red;
}

.m-danger {
  color: @c-danger;
}

.m-success {
  color: @c-success;
}

.m-warning {
  color: @c-wraning;
}

.m-friend {
  color: @c-friend;
}

.m-info {
  color: @c-info;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear   : both;
  overflow: hidden;
}

.clearfix {
  zoom: 1;
}

.limit-1 {
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.limit-2 {
  overflow          : hidden;
  text-overflow     : ellipsis;
  display           : -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.limit-3 {
  overflow          : hidden;
  text-overflow     : ellipsis;
  display           : -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

h2,
h3,
h4,
h5,
p {
  margin: 0;
}

[v-cloak] {
  display: none;
}

ul {
  list-style: none;
  margin    : 0;
  padding   : 0;
}